<template>
  <el-tab-pane label="设置" name="setting">
    <div class="panel">
      <el-row :gutter="10">
        <el-col :span="8">抗锯齿</el-col>
        <el-col :span="16"></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">色调映射</el-col>
        <el-col :span="16"></el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="10">
        <el-col>快捷键 </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">移动</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.translate"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">旋转</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.rotate"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">缩放</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.scale"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="10">
        <el-col :span="8">测量</el-col>
        <el-col :span="16">
          <el-input
            v-model="shortcutKey.measure"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="10">
        <el-col :span="8">撤销</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.repeal"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">恢复</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.recover"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">聚焦</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.focus"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">删除</el-col>
        <el-col :span="4">Ctrl +</el-col>
        <el-col :span="12">
          <el-input
            v-model="shortcutKey.delete"
            class="shortcut-key"
            @focus="handleFocus($event)"
          ></el-input>
        </el-col>
      </el-row>
      <el-divider />

      <el-row align="middle">
        <el-col :span="6">历史记录</el-col>
      </el-row>
      <div class="historys">
        <div
          v-for="(history, index) in undoStackList"
          :key="history.timestamp"
          class="option"
          :class="{ active: index === undoStackList.length - 1 }"
          @click="handleUndo(index)"
        >
          {{ history.snapshot.name }}
        </div>
        <div
          v-for="(history, index) in redoStack"
          :key="history.timestamp"
          class="option disabled"
          @click="handleRedo(index)"
        >
          {{ history.snapshot.name }}
        </div>
      </div>
      <el-button style="margin-top: 10px" @click="clearLocalHistory">清空</el-button>
    </div>
  </el-tab-pane>
</template>
<script setup lang="ts">
import { useActiveObject } from '@renderer/stores/activeObject'
import { useActionMode } from '@renderer/stores/actionMode'
import { storeToRefs } from 'pinia'
import { useOperationConfiguration } from '@renderer/stores/operationConfiguration'
import { useFocusObject } from '@renderer/utils/useFocusObject'
import { useHistory } from '@renderer/utils/useHistory'
import { saveModel } from '@renderer/api'
import { ElMessage } from 'element-plus'
import { useViewportStore } from '@renderer/stores/viewport'
import useDelete from '@renderer/utils/useDelete'

function handleFocus(e) {
  e.target?.select()
}

const viewportConfig = useOperationConfiguration()
const { shortcutKey } = storeToRefs(viewportConfig)

const { setCurrentMode } = useActionMode()
const { focusObject } = useFocusObject()
const viewportStore = useViewportStore()
const { publicGroup } = storeToRefs(viewportStore)
document.addEventListener('keydown', async (e: KeyboardEvent) => {
  for (const val in shortcutKey.value) {
    if (Object.prototype.hasOwnProperty.call(shortcutKey.value, val)) {
      const key = shortcutKey.value[val]
      if ((e.ctrlKey || e.metaKey) && e.key === key) {
        if (['translate', 'rotate', 'scale', 'measure'].includes(val)) {
          e.preventDefault()
          if (!activeShallowRef.value?.name.includes('editor-point')) {
            setCurrentMode(val)
          }
        } else if (val === 'repeal') {
          handleUndo(undoStackList.value.length - 2)
        } else if (val === 'recover') {
          e.preventDefault()
          handleRedo(0)
        } else if (val === 'focus') {
          e.preventDefault()
          focusObject(activeShallowRef.value)
        } else if (val === 'save') {
          e.preventDefault()
          const data = publicGroup.value?.toJSON()
          data.object.children = data.object.children?.filter((obj) => obj.name !== 'editor')
          await saveModel(data)
          ElMessage.success('保存成功')
        }
      } else if (e.key === key && val === 'delete') {
        e.preventDefault()
        handleDelete()
      }
    }
  }
})

const activeObjectStore = useActiveObject()
const { activeShallowRef } = storeToRefs(activeObjectStore)

// 删除
const { deleteObject } = useDelete()
function handleDelete() {
  deleteObject()
}

// 历史栈
const { undoStackList, redoStack, handleRedo, handleUndo, clearLocalHistory } = useHistory()
</script>
<style lang="scss" scoped>
.panel {
  padding: 10px;
}

.shortcut-key {
  width: 50px;

  ::v-deep(.el-input__inner) {
    text-align: center;
  }
}

::v-deep(.el-row) {
  margin-top: 10px;
}

.historys {
  margin-top: 5px;
  background-color: var(--box-background);
  height: 240px;
  padding: 5px;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: none;

  .option {
    padding: 4px;
    color: var(--base-color);
    white-space: nowrap;
    font-size: 14px;

    &.active {
      background-color: var(--input-background);
    }

    &:hover {
      background-color: var(--main-background);
    }

    &.disabled {
      color: var(--disabled-color);
    }
  }
}
</style>
